---
layout: example.html
title: Sea Level
shortdesc: Render sea level at different elevations
docs: >
  <p>
    This example uses a <code>ol/source/Raster</code> with
    <a href="https://documentation.maptiler.com/hc/en-us/articles/4405444055313-RGB-Terrain-by-MapTiler">MapTiler Terrain-RGB tiles</a>
    to "flood" areas below the elevation shown on the sea level slider.
  </p>
tags: "raster, pixel operation, flood"
cloak:
  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
    value: Get your own API key at https://www.maptiler.com/cloud/
---
<div id="map" class="map"></div>
<label>
  Sea level
  <input id="level" type="range" min="0" max="100" value="1"/>
  +<span id="output"></span> m
</label>
<br>
Go to
<a class="location" data-center="-122.3267,37.8377" data-zoom="11">San Francisco</a>,
<a class="location" data-center="-73.9338,40.6861" data-zoom="11">New York</a>,
<a class="location" data-center="72.9481,18.9929" data-zoom="11">Mumbai</a>, or
<a class="location" data-center="120.831,31.160" data-zoom="9">Shanghai</a>
